<template>
	<v-content ref="content" padding-bottom="100">
		<v-statusbar class="status-bar"></v-statusbar>
		<div class="header padding">
			<div class="title">考试</div>
		</div>

		<div class="tab margin">
			<div class="tab-item" :class="[{ active: current == 0 }]" @click="onTabChange(0)">待考</div>
			<div class="tab-item" :class="[{ active: current == 1 }]" @click="onTabChange(1)">已考</div>
			<div class="tab-item" :class="[{ active: current == 2 }]" @click="onTabChange(2)">已结束</div>
			<div class="tab-item" :class="[{ active: current == 3 }]" @click="onTabChange(3)">题库学习</div>
		</div>

		<template v-if="current == 0">
			<div
				class="examination margin"
				v-for="(item, index) in list"
				:key="index"
				@click="couldHandle(item, () => toExam(item))"
			>
				<div class="title">
					<image class="icon" src="/static/image/icon-hot.png"></image>
					<div class="name">{{ item.examName }}</div>
					<div class="tag" v-if="current == 3">开放中</div>
					<div class="button" v-else>
						<image class="image" src="/static/image/icon-badge.png"></image>
						{{ item.totalScore }}分
					</div>
				</div>
				<div class="message">
					<div class="tip padding">{{ item.examEndTime }} 截止</div>
					{{ item.answeredNum }}人已考试
				</div>
			</div>
		</template>
		<template v-else-if="current == 1">
			<div
				class="examination margin"
				v-for="(item, index) in list"
				:key="index"
				@click="couldHandle(item, () => toPage('/pages/exam/result?id=' + item.recordId))"
			>
				<div class="title">
					<image class="icon" src="/static/image/icon-hot.png"></image>
					<div class="name">{{ item.examName }}</div>
					<div class="tag" v-if="current == 3">开放中</div>
					<div
						class="button"
						style="font-size: 28rpx"
						v-else
						:class="[item.memberScore >= item.qualifiedScore ? 'success' : 'fail']"
					>
						{{ item.memberScore }}分
					</div>
				</div>
				<div class="message">
					<div class="tip padding">{{ item.examEndTime }}截止</div>
					{{ item.memberScore >= item.qualifiedScore ? "已" : "未" }}通过考试
				</div>
			</div>
		</template>
		<template v-else-if="current == 2">
			<uniSwipeAction>
				<uniSwipeActionItem
					:right-options="options"
					@click="bindClick(item.id)"
					v-for="(item, index) in list"
					:key="item.id"
				>
					<div
						class="examination margin"
						@click="couldHandle(item, () => toPage('/pages/exam/finish?id=' + item.recordId))"
					>
						<div class="title">
							<image class="icon" src="/static/image/icon-hot.png"></image>
							<div class="name">{{ item.examName }}</div>
							<div class="tag" v-if="current == 3">开放中</div>
							<div
								class="button"
								style="font-size: 28rpx"
								v-else
								:class="[item.memberScore >= item.qualifiedScore ? 'success' : 'fail']"
							>
								{{ item.memberScore }}分
							</div>
						</div>
						<div class="message">
							<div class="tip padding">{{ item.examEndTime }}截止</div>
							{{ item.memberScore >= item.qualifiedScore ? "已" : "未" }}通过考试
						</div>
					</div>
				</uniSwipeActionItem>
			</uniSwipeAction>
		</template>
		<template v-else>
			<div
				class="examination margin"
				v-for="(item, index) in list"
				:key="index"
				@click="couldHandle(item, () => toPage('/pages/exam/questionBank?id=' + item.id))"
			>
				<div class="title">
					<image class="icon" src="/static/image/icon-hot.png"></image>
					<div class="name">{{ item.qbName }}</div>
					<div class="tag" v-if="current == 3">开放中</div>
					<div class="button" v-else>
						<image class="image" src="/static/image/icon-badge.png"></image>
						{{ item.totalScore }}分
					</div>
				</div>
				<div class="message">
					<div class="tip padding">{{ item.openEndTime }} 截止</div>
				</div>
			</div>
		</template>

		<v-empty :list="list"></v-empty>

		<v-tabbar current="2"></v-tabbar>
	</v-content>
</template>

<script>
import mixins from "@/mixins"
import uniSwipeAction from "@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action"
import uniSwipeActionItem from "@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item"
export default {
	name: "exam",
	mixins: [mixins],
	data() {
		return {
			current: 0,

			list: [],
			total: 0,
			page: 1,
			options: [
				{
					text: "删除",
					style: {
						backgroundColor: "#dd524d",
					},
				},
			],
		}
	},
	computed: {},
	methods: {
		couldHandle(item, callback) {
			if (item.isDeleted == 1) {
				this.showMessage.error("该考试已删除")
				return
			}
			callback && callback()
		},

		async bindClick(id) {
			try {
				await this.$axios.post("/study/exam/studyExamStatistics/isDelete?id=" + id)
				this.list = []
				this.getList()
				uni.showToast({
					title: "删除成功",
					icon: "none",
				})
			} catch (error) {
				console.log(error)
			}
		},
		onshow() {
			const examCurrent = window.sessionStorage.getItem("examCurrent")
			this.current = examCurrent || 0
			this.reload()
		},

		reload() {
			this.page = 1
			this.total = 0
			this.list = []
			this.getList()
		},

		onPullDown() {
			this.reload()
		},

		onTabChange(current) {
			this.current = current
			this.reload()

			window.sessionStorage.setItem("examCurrent", current)
		},

		async getList() {
			try {
				let url = ""
				switch (+this.current) {
					case 0:
						url = "/api/study/exam/studyExam/page/unanswered"
						break
					case 1:
						url = "/api/study/exam/studyExam/page/answeredExams"
						break
					case 2:
						url = "/api/study/exam/studyExam/page/endTheExams"
						break
					case 3:
						url = "/api/study/exam/studyQuestionbank/page"
					default:
						break
				}

				const data = await this.$axios.get(url, {
					currentPage: this.page,
					size: 10,
				})
				this.total = data.total
				this.list = this.list.concat(data.records)
				uni.stopPullDownRefresh()
			} catch (error) {
				uni.stopPullDownRefresh()
			}
		},
		onScrollBottom() {
			if (this.list.length >= this.total) return
			this.page++
			this.getList()
		},

		toExam(item) {
			if (item.examEndTime) {
				if (new Date() > new Date(item.examEndTime)) {
					this.showMessage.error("考试已截止")
					return
				}
			}
			this.current = 0
			this.toPage("/pages/exam/start", { id: item.id })
		},
	},
	components: {
		uniSwipeAction,
		uniSwipeActionItem,
	},
}
</script>

<style lang="scss" scoped>
@import "../basis.scss";

/deep/ .uni-swipe_button {
	width: 150rpx;
}
.tab {
	line-height: 110rpx;
	text-align: center;
	border-bottom: 1px solid #f2f2f2;
	color: #555555;
	font-size: 30rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.tab-item {
		padding: 0 10rpx;
		position: relative;
		margin-right: 10rpx;
		transition: all 0.15s;
		&.active {
			transform: scale(1.2);
			font-weight: 700;
			color: #000;
			&::before {
				opacity: 1;
			}
		}
		&.dot {
			&::after {
				opacity: 1;
			}
		}
		&::before {
			content: "";
			position: absolute;
			bottom: 20rpx;
			right: 0;
			left: 0;
			border-radius: 100px;
			background: #000;
			width: 22rpx;
			height: 10rpx;
			margin: auto;
			opacity: 0;
		}
		&::after {
			content: "";
			position: absolute;
			top: 25%;
			right: 0;
			width: 15rpx;
			height: 15rpx;
			border-radius: 50%;
			background: $danger;
			opacity: 0;
		}
	}
}

.examination {
	border-bottom: 1px solid #f7f7f7;
	padding-bottom: 24rpx;
	.title {
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.icon {
			width: 30rpx;
			height: 40rpx;
			display: block;
			margin-right: 10rpx;
			flex: none;
		}
		.name {
			font-size: 32rpx;
			color: #333;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-right: 15rpx;
		}
		.tag {
			font-size: 24rpx;
			white-space: nowrap;
			color: $color;
			background: rgba($color, 0.15);
			border-radius: 5rpx;
			padding: 5rpx 13rpx;
			flex: none;
		}
		.button {
			width: 136rpx;
			height: 55rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			border-radius: 1000px;
			background-image: linear-gradient(to right, #fea110, #ff800e);
			font-size: 24rpx;
			margin-left: auto;
			flex: none;
			&.success {
				background-image: linear-gradient(to right, #9ff141, #64e424);
			}
			&.fail {
				background-image: linear-gradient(to right, #e78681, #d82b33);
			}
			.image {
				width: 30rpx;
				height: 35rpx;
				margin-right: 5rpx;
			}
		}
	}
	.message {
		color: #888888;
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tip {
			background: #f7f7f7;
			color: #b0b0b0;
			line-height: 50rpx;
		}
	}
}
.uniapp {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 50rpx 20rpx;
}
</style>
